<template>
  <div class="reject-configuration">
    <je-form-item
      :label="$t('RejectConfiguration.enable')"
      :label-col="{ span: 8 }"
      style="padding-right: 16px; margin-top: 16px"
      name="enable"
    >
      <je-switch v-model:value="formState.enable" mode="checkbox" />
      <span class="prompt">{{ $t('RejectConfiguration.enableContext') }}</span>
    </je-form-item>

    <je-form-item
      :label="$t('RejectConfiguration.dismissTaskName')"
      :label-col="{ span: 8 }"
      style="padding-right: 16px"
      name="dismissTaskIds"
    >
      <je-select
        v-model:value="formState.dismissTaskIds"
        :options="rejectOptions"
        mode="multiple"
      />
    </je-form-item>

    <!-- <div class="title">可配置多个驳回按钮用于方便客户快速选择驳回路径</div>

    <je-grid
      ref="grid"
      border
      auto-resize
      show-overflow="ellipsis"
      keep-source
      show-header-overflow
      resizable
      height="300"
      size="mini"
      class="reject-configuration-grid"
      header-align="center"
      :edit-config="{
        trigger: 'click',
        mode: 'cell',
        showStatus: true,
        showInsertStatus: false,
      }"
      :store="gridStore"
    >
      <je-column width="40" align="center">
        <template #header>
          <i style="font-size: 16px; cursor: pointer" class="fal fa-plus" @click="addColumn"></i>
        </template>
        <template #default="{ row }">
          <i
            style="font-size: 16px; cursor: pointer"
            class="fal fa-times"
            @click="deleteColumn(row)"
          ></i>
        </template>
      </je-column>
      <je-column
        field="buttonName"
        :title="$t('RejectConfiguration.name')"
        width="50%"
        :edit-render="inputRender"
      >
        <template #edit="{ row }">
          <je-input v-model:value.trim="row.buttonName" />
        </template>
      </je-column>
      <je-column
        field="nodeId"
        :title="$t('RejectConfiguration.nodeId')"
        :edit-render="inputRender"
      >
        <template #edit="{ row }">
          <je-select v-model:value="row.nodeId" :options="rejectOptions" />
        </template>
        <template #default="{ row }">
          {{ getSelectLabel(row.nodeId, rejectOptions) }}
        </template>
      </je-column>
    </je-grid> -->

    <je-form-item :label-col="{ span: 8 }" name="directSendAfterDismiss">
      <template #label>
        <i
          class="conditionicon fas fa-question-circle"
          @click="clickIcon('directSendAfterDismiss')"
        />
        {{ $t('RejectConfiguration.directSubmitAfterDismiss') }}
      </template>
      <je-switch
        v-model:value="formState.directSendAfterDismiss"
        mode="checkbox"
        :disabled="formState.disableSendAfterDismiss == '1'"
      />
      <span class="prompt">{{ $t('RejectConfiguration.directSubmitAfterDismissContext') }}</span>
    </je-form-item>
    <je-form-item :label-col="{ span: 8 }" name="forceCommitAfterDismiss">
      <template #label>
        <i
          class="conditionicon fas fa-question-circle"
          @click="clickIcon('forceCommitAfterDismiss')"
        />
        {{ $t('RejectConfiguration.disableSubmitAfterGoback') }}
      </template>
      <je-switch
        v-model:value="formState.forceCommitAfterDismiss"
        mode="checkbox"
        :disabled="formState.disableSendAfterDismiss == '1'"
      />
      <span class="prompt">{{ $t('RejectConfiguration.disableSubmitAfterGobackContext') }}</span>
    </je-form-item>

    <je-form-item :label-col="{ span: 8 }" name="disableSendAfterDismiss">
      <template #label>
        <i
          class="conditionicon fas fa-question-circle"
          @click="clickIcon('disableSendAfterDismiss')"
        />
        {{ $t('RejectConfiguration.refusalToDisableDelivery') }}
      </template>
      <je-switch
        v-model:value="formState.disableSendAfterDismiss"
        mode="checkbox"
        :disabled="
          formState.forceCommitAfterDismiss == '1' || formState.directSendAfterDismiss == '1'
        "
      />
      <span class="prompt">{{ $t('RejectConfiguration.refusalToDisableDeliveryContext') }}</span>
    </je-form-item>

    <je-form-item
      :label="$t('RejectConfiguration.canNotReturn')"
      :label-col="{ span: 8 }"
      name="noReturn"
    >
      <je-switch v-model:value="formState.noReturn" mode="checkbox" />
      <span class="prompt">{{ $t('RejectConfiguration.canNotReturnContext') }}</span>
    </je-form-item>

    <je-form-item
      :label="$t('RejectConfiguration.submitReturnPersonDirectly')"
      :label-col="{ span: 8 }"
      name="directSendAfterReturn"
    >
      <je-switch v-model:value="formState.directSendAfterReturn" mode="checkbox" />
      <span class="prompt">{{ $t('RejectConfiguration.submitReturnPersonDirectlyContext') }}</span>
    </je-form-item>
    <Explain
      v-if="explainType"
      :modal-context="modalContext"
      width="600px"
      @closEexplain="closEexplain"
    />
  </div>
</template>

<script>
  import { defineComponent, ref, watch } from 'vue';
  import { /* Grid, Input,  */ Select, Form, Data, Switch } from '@jecloud/ui';
  import { isNotEmpty } from '@jecloud/utils';
  import { inputRender } from '@/helper/edit-render';
  import Explain from '@/components/explain/index.vue';

  export default defineComponent({
    name: 'RejectConfiguration',
    components: {
      /* JeGrid: Grid,
      JeColumn: Grid.Column,
      JeInput: Input, */
      JeFormItem: Form.Item,
      JeSelect: Select,
      JeSwitch: Switch,
      Explain,
    },
    props: {
      dismissConfig: {
        type: Object,
        default: () => {
          return {};
        },
      },
      nodeId: {
        type: String,
        default: '',
      },
      wfEditor: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    setup(props) {
      const grid = ref(null);
      //列表表单数据定义
      const formState = ref(props.dismissConfig);
      const rejectOptions = ref([]);

      //列表的数据源store
      const gridStore = Data.Store.useGridStore({
        data: props.dismissConfig.commitBreakdown,
      });

      const getRejectOptions = ($editor) => {
        const datas = [];
        if ($editor) {
          const selectNode = $editor.graph.getSelectionCell();
          let num = 0;
          const getNodeData = (nodeData) => {
            // 如果出入的节点是原始的节点那么结束递归
            if (selectNode.getId() == nodeData.getId()) {
              if (num >= 1) {
                return false;
              }
              num++;
            }
            //节点对象线的数据
            const edges = nodeData.edges;
            if (edges && edges.length > 0) {
              edges.forEach((edge) => {
                //线的入口节点
                const source = edge.source;
                const target = edge.target;
                if (target && target.getId() == nodeData.getId()) {
                  if (source) {
                    const possessData = datas.filter((item) => item.value == source.getId()) || [];
                    if (
                      ['task', 'decision', 'to_assignee', 'random', 'joint'].indexOf(
                        source.getAttribute('type'),
                      ) != -1 &&
                      possessData.length <= 0
                    ) {
                      // 自身节点不可作为驳回节点
                      if (source.getId() != selectNode.getId()) {
                        datas.push({
                          value: source.getId(),
                          label: source.getAttribute('label') || source.getAttribute('name'),
                        });
                      }
                    }

                    getNodeData(source);
                  }
                }
              });
            }
          };
          getNodeData(selectNode);
          rejectOptions.value = datas;
        }
      };

      //监听节点组件变化重置数据
      watch(
        () => props.nodeId,
        () => {
          gridStore.loadData(props.dismissConfig.commitBreakdown);
          formState.value = props.dismissConfig;
          const $editor = props.wfEditor.editor.$editor;
          getRejectOptions($editor);
        },
        { immediate: true },
      );

      //添加列
      const addColumn = () => {
        const data = {
          name: '',
          nodeId: '',
          buttonName: '',
        };
        gridStore.insert(data, -1);
      };

      //删除列
      const deleteColumn = (row) => {
        gridStore.remove(row);
      };

      //监听列表的值改变给主数据赋值
      watch(
        () => gridStore.data,
        (newData) => {
          const datas = [];
          newData.forEach((item) => {
            if (isNotEmpty(item.buttonName)) {
              datas.push(item);
            }
          });
          formState.value.commitBreakdown = datas;
        },
        { deep: true },
      );

      //列表单元格格式化
      const getSelectLabel = (value, list, valueProp = 'value', labelField = 'label') => {
        const item = list.find((item) => item[valueProp] === value);
        return item ? item[labelField] : null;
      };
      //点击icon
      const modalContext = ref('');
      const explainType = ref(false);
      const clickIcon = (type) => {
        // 可直接提交驳回人
        if (type == 'directSendAfterDismiss') {
          modalContext.value =
            '“可直接提交驳回人”勾选后，被驳回节点处理人会显示【直送】、【提交】按钮，进行提交操作。';
          // 被驳回后强制提交
        } else if (type == 'forceCommitAfterDismiss') {
          modalContext.value =
            '“被驳后强制提交”勾选后，被驳回节点处理人仅显示【直送】按钮，进行提交操作。';
          // 被驳回后禁用送交
        } else if (type == 'disableSendAfterDismiss') {
          modalContext.value =
            '①“被驳后禁用送交”勾选后，被驳回节点处理人仅显示【作废】按钮，进行提交操作；<br/><br/>②当勾选“可直接提交驳回人、被驳后强制提交”，会自动禁用“被驳后禁用送交”选项，若勾选“被驳后禁用送交”则会自动禁用“可直接提交驳回人、被驳后强制提交”选项；<br/><br/>③当勾选“被驳后禁用送交”时，需要同步勾选被驳回节点上的【可作废】按钮，流程才可继续进行流转操作。';
        }
        explainType.value = true;
      };
      //弹窗关闭回调
      const closEexplain = () => {
        explainType.value = false;
      };

      return {
        gridStore,
        addColumn,
        deleteColumn,
        inputRender,
        formState,
        grid,
        rejectOptions,
        getSelectLabel,
        explainType,
        closEexplain,
        clickIcon,
        modalContext,
      };
    },
  });
</script>

<style lang="less" scoped>
  .reject-configuration {
    .title {
      height: 32px;
      line-height: 32px;
      text-align: center;
      background: #f0f4f9;
      border-top: 1px solid #e6e6e6;
    }
  }
</style>

<style lang="less">
  .reject-configuration {
    .reject-configuration-grid {
      .vxe-table--render-default .vxe-table--border-line {
        border-left: 0 !important;
      }
    }
  }
</style>
